<!-- 栏目权限管理 -->
<template>
  <!-- <el-button type="primary" @click="authority('add')" style="margin-bottom: 10px;">分配权限</el-button> -->
  <el-table v-loading="loading.value" :data="data.tableData" row-key="id" @select="handleSelect" @select-all="handleSelect" ref="tableRef" table-layout="auto" style="width: 100%">
    <!-- <el-table-column type="selection" :selectable="checkSelectable" width="55"></el-table-column> -->
    <el-table-column prop="name" label="栏目名称" width="" />
    <el-table-column prop="description" label="描述" width="" />
    <el-table-column prop="createTime" label="创建时间" width="" />
    <el-table-column prop="createdByName" label="创建人" width="" />
    <el-table-column prop="updateTime" label="更新时间" width="" />
    <el-table-column prop="modifiedByName" label="更新人" width="" />
    <el-table-column prop="deleted" label="删除标识" width="">
      <template #default="scope">
        <span v-if="scope.row.deleted === 0">正常</span>
        <span v-if="scope.row.deleted === 1">已删除</span>
      </template>
    </el-table-column>
    <el-table-column prop="sort" label="排序" width="" />
    <el-table-column prop="" label="操作" width="" fixed="right">
      <template #default="scope">
        <el-button @click="authority('edit', scope.row)">分配权限</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList" @current-change="getList" style="margin-top: 20px;display:flex;justify-content: flex-end;" />
  <dialogForm ref="dialogFormRef" @resetList="getList" :selectedList="selectedList"></dialogForm>
  <selectUser ref="selectUserRef" @resetList="getList"></selectUser>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { listColumn, editPColumn, editSColumn, deletePColumn, deleteSColumn } from '@/api/allApi'
import dialogForm from './dialogForm.vue'
import selectUser from './selectUser.vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'
import { useRouter } from 'vue-router'

// let tableData = reactive([])
const pageNum = ref(1) //第几页
const pageSize = ref(10) //每页多少条
const total = ref(0) //总条数
const data = reactive({
  tableData: []
});
const loading = ref(false); // 控制加载状态

onMounted(() => {
  getList()
})

const getList = () => {
  loading.value  = true
  data.tableData = []
  listColumn({
    websiteId: Number(localStorage.getItem('WebsiteId')), //网站id 1：鞍钢官网 2：博物馆
    pageNum: pageNum.value,
    pageSize: pageSize.value
  }).then((res: any) => {
    if (res.code === 0) {
      data.tableData = res.data.list
      total.value = res.data.total
      loading.value  = false
    } else {
      ElMessage.success(res.msg)
    }

  })
}

const selectedList = ref([])
// 判断行是否可勾选
const checkSelectable = (row: TreeNode) => {
  return !(row.disabled || row.agCategoryPermissions.length > 0)
}
const tableRef = ref<InstanceType<typeof ElTable>>()
const handleSelect = (selected: TreeNode[], row: TreeNode) => {
  selectedList.value = selected
  const isSelected = selected.includes(row) //判断当前行是否在勾选的数组中（也就是判断当前操作是勾选还是取消）
  if (row.children) {
    recursionSon(row.children, isSelected)
  }
  nextTick(() => {
    tableRef.value!.toggleRowSelection(row, isSelected) //切换某一行的选中状态
  })

  data.tableData.forEach((item: any) => {
    if (item.level != row.level) {
      item.disabled = isSelected //切换禁用状态
    }
    if (item.children) {
      recursionDifferent(item.children, isSelected, row.level)
    }
  })
}
//当前节点的子节点被禁用
const recursionSon = (children: TreeNode, isSelected: boolean) => {
  children.forEach((item: any) => {
    nextTick(() => {
      tableRef.value!.toggleRowSelection(item, isSelected) //切换某一行的选中状态
    })
    item.disabled = isSelected //切换禁用状态
    if (item.children) {
      recursionSon(item.children, isSelected)
    }
  })
}
//不处于同一级层的节点被禁用
const recursionDifferent = (children: TreeNode, isSelected: boolean, level: number) => {
  children.forEach((item: any) => {
    if (item.level != level) {
      item.disabled = isSelected //切换禁用状态
    }
    if (item.children) {
      recursionDifferent(item.children, isSelected,level)
    }
  })
}

const dialogFormRef = ref()
const selectUserRef = ref()
const authority = (type: string, row: any) => {
  if (type == 'add' && selectedList.value.length === 0) {
    return ElMessage.error('请选择要分配权限的栏目')
  }
//   dialogFormRef.value.init(type, row)
  selectUserRef.value.init(row)
}
</script>

<style lang="scss" scoped>
//搭配el-table里的table-layout="auto"属性，再让每一列里的width为空即可展现出适应表格内容的列宽
:deep(.el-table .cell) {
  width: max-content;
  display: inline-block;
}
</style>
